<!doctype html>
<!-- compare https://github.com/emscripten-core/emscripten/blob/main/src/shell_minimal.html -->
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HiGHS</title>
  </head>
  <body>
    <div style="display: grid; grid-template-columns: 1fr 1fr">
      <textarea id="input" style="height: 700px">
      </textarea>    
      <textarea id="output"></textarea>    
      <button id="run">Optimize!</button>
    </div>
    {{{ SCRIPT }}}
    <script type='text/javascript'>
      main = async () => {
        const printInTextarea = function(text) {
          if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
          // These replacements are necessary if you render to raw HTML
          //text = text.replace(/&/g, "&amp;");
          //text = text.replace(/</g, "&lt;");
          //text = text.replace(/>/g, "&gt;");
          //text = text.replace('\n', '<br>', 'g');
          // console.log(text);
          if (element) {
            element.value += text + "\n";
            element.scrollTop = element.scrollHeight; // focus on bottom
          }
        }

        const highs = await HiGHS({
          print: printInTextarea,
          printErr: printInTextarea
        })        

        const inputTextarea = document.getElementById('input');
        inputTextarea.value = `Maximize 
 obj: x1 + 2 x2 + 3 x3 + x4
Subject To
 c1: - x1 + x2 + x3 + 10 x4 <= 20
 c2: x1 - 3 x2 + x3 <= 30
 c3: x2 - 3.5 x4 = 0
Bounds
 0 <= x1 <= 40
 2 <= x4 <= 3
General
 x4
End`;

        const element = document.getElementById('output');
        const clearOutput = (v) => {
          element.value = v || '';
        }

        clearOutput('Click on "Optimize!"') // clear browser cache

        const runButton = document.getElementById('run');
        runButton.addEventListener("click", () => {
          clearOutput()
          const inputFilename = 'inputFile.lp'
          highs.FS.writeFile(inputFilename, inputTextarea.value)
          highs.callMain([inputFilename])
        })

      }

      main()

    </script>
  </body>
</html>